Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | import { useEffect, useState } from 'react';
const DEVICE_ID_KEY = 'streamcore_device_id';
const DEVICE_NAME_KEY = 'streamcore_device_name';
/**
* Generate a unique device ID based on browser fingerprint
*/
function generateDeviceId(): string {
const navigator = window.navigator;
const screen = window.screen;
// Collect browser fingerprint data
const fingerprint = [
navigator.userAgent,
navigator.language,
screen.colorDepth,
screen.width + 'x' + screen.height,
new Date().getTimezoneOffset(),
!!window.sessionStorage,
!!window.localStorage,
].join('|');
// Simple hash function
let hash = 0;
for (let i = 0; i < fingerprint.length; i++) {
const char = fingerprint.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash; // Convert to 32bit integer
}
// Add random component for uniqueness
const random = Math.random().toString(36).substring(2, 15);
const timestamp = Date.now().toString(36);
return `web_${Math.abs(hash).toString(36)}_${timestamp}_${random}`;
}
/**
* Hook to manage device ID in localStorage
* Returns the device ID and a function to check if device is registered
*/
export function useDeviceId() {
const [deviceId, setDeviceId] = useState<string>('');
const [deviceName, setDeviceName] = useState<string>('');
const [isRegistered, setIsRegistered] = useState<boolean>(false);
useEffect(() => {
// Try to get existing device ID from localStorage
let storedDeviceId = localStorage.getItem(DEVICE_ID_KEY);
let storedDeviceName = localStorage.getItem(DEVICE_NAME_KEY);
// If no device ID exists, generate a new one
if (!storedDeviceId) {
storedDeviceId = generateDeviceId();
localStorage.setItem(DEVICE_ID_KEY, storedDeviceId);
}
// If no device name exists, use browser info
if (!storedDeviceName) {
const browserName = getBrowserName();
const osName = getOSName();
storedDeviceName = `${browserName} on ${osName}`;
localStorage.setItem(DEVICE_NAME_KEY, storedDeviceName);
}
setDeviceId(storedDeviceId);
setDeviceName(storedDeviceName);
// Check if this device ID is registered (we'll verify with backend)
const registered = localStorage.getItem(`${DEVICE_ID_KEY}_registered`) === 'true';
setIsRegistered(registered);
}, []);
const markAsRegistered = () => {
localStorage.setItem(`${DEVICE_ID_KEY}_registered`, 'true');
setIsRegistered(true);
};
const updateDeviceName = (newName: string) => {
localStorage.setItem(DEVICE_NAME_KEY, newName);
setDeviceName(newName);
};
const clearDeviceData = () => {
localStorage.removeItem(DEVICE_ID_KEY);
localStorage.removeItem(DEVICE_NAME_KEY);
localStorage.removeItem(`${DEVICE_ID_KEY}_registered`);
setDeviceId('');
setDeviceName('');
setIsRegistered(false);
};
return {
deviceId,
deviceName,
isRegistered,
markAsRegistered,
updateDeviceName,
clearDeviceData};
}
/**
* Get browser name from user agent
*/
function getBrowserName(): string {
const userAgent = navigator.userAgent;
if (userAgent.includes('Firefox')) return 'Firefox';
if (userAgent.includes('Edg')) return 'Edge';
if (userAgent.includes('Chrome')) return 'Chrome';
if (userAgent.includes('Safari')) return 'Safari';
if (userAgent.includes('Opera') || userAgent.includes('OPR')) return 'Opera';
return 'Browser';
}
/**
* Get OS name from user agent
*/
function getOSName(): string {
const userAgent = navigator.userAgent;
if (userAgent.includes('Win')) return 'Windows';
if (userAgent.includes('Mac')) return 'macOS';
if (userAgent.includes('Linux')) return 'Linux';
if (userAgent.includes('Android')) return 'Android';
if (userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')) return 'iOS';
return 'Unknown OS';
}
|